<template>
   
        <div style="width:50%; padding:20px;margin:0 auto;background:#fff;">
            <el-form :model="angentForm" :rules="rules" ref="angentForm"  label-width="130px" class="form-angent-upload">
                <el-form-item label="经纪商代码" prop="agent_num">
                    <el-input v-model="angentForm.agent_num" auto-complete="off" placeholder="请输入经纪商代码"></el-input>
                </el-form-item>
                <el-form-item label="经纪商名称" prop="agent_name">
                    <el-input v-model="angentForm.agent_name" auto-complete="off" placeholder="请输入经纪商名称"></el-input>
                </el-form-item>
                <el-form-item label="注册经纪商地址" prop="agent_reg_site">
                    <el-input v-model="angentForm.agent_reg_site" auto-complete="off" placeholder="请输入注册经纪商地址"></el-input>
                </el-form-item>
                <el-form-item label="经纪商登录地址" prop="agent_login_url">
                    <el-input v-model="angentForm.agent_login_url" auto-complete="off" placeholder="请输入经纪商登录地址"></el-input>
                </el-form-item>
                <el-form-item label="交易连接地" prop="trade_url">
                    <el-input v-model="angentForm.trade_url" auto-complete="off" placeholder="请输入交易连接地"></el-input>
                </el-form-item>
              <el-form-item label="启用状态" prop="agent_num">
                   <el-select placeholder="" v-model="angentForm.status">
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="停用" value="0"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="经纪商简介" prop="agent_desc">
                    <el-input v-model="angentForm.agent_desc" placeholder="请输入经纪商简介" type="textarea" auto-complete="off"></el-input>
                </el-form-item>

        <el-row :gutter="20" style="border-bottom:1px dashed #ddd;padding:10px 0;">
              <el-col :span="12">
                <el-form-item label="APP经纪商背景LOGO" prop="agent_bg_logo" label-width="100px">
                    <img width="100%" :src="angentForm.agent_bg_logo" alt=""  class="avatar">
                   <el-upload
                    class="avatar-uploader"
                    :action="upload"
                    :with-credentials="true"
                    accept="image/*"
                    list-type="picture-card"
                    :show-file-list="false"
                    :on-success="handleAvatarAPPABLSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-plus avatar-uploader-icon fs16"></i>
                    </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item label="PC经纪商背景LOGO" prop="agent_bg_logo_pc" label-width="100px">
                    <img width="100%" :src="angentForm.agent_bg_logo_pc" alt=""  class="avatar">
                   <el-upload
                    class="avatar-uploader"
                     :with-credentials="true"
                    accept="image/*"
                    :show-file-list="false"
                   :action="upload"
                    :on-success="handleAvatarPCBackSuccess"
                    list-type="picture-card"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-plus avatar-uploader-icon fs16"></i>
                    </el-upload>
                </el-form-item>

              </el-col>
              <small class="block tc light-grey">用于注册成功后，经纪商选择页面</small>
            </el-row>

          <el-row :gutter="20" style="border-bottom:1px dashed #ddd;padding:10px 0;">
              <el-col :span="12">
               <el-form-item label="APP经纪商通用LOGO" prop="agent_logo" label-width="100px">
                    <img width="100%" :src="angentForm.agent_logo" alt=""  class="avatar">
                   <el-upload
                    class="avatar-uploader"
                    :action="upload"
                    :with-credentials="true"
                    accept="image/*"
                    list-type="picture-card"
                    :show-file-list="false"
                    :on-success="handleAvatarAPPAULSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-plus avatar-uploader-icon fs16"></i>
                    </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item label="PC经纪商通用LOGO" prop="agent_logo_pc" label-width="100px">
                    <img width="100%" :src="angentForm.agent_logo_pc" alt=""  class="avatar">
                   <el-upload
                    class="avatar-uploader"
                     :with-credentials="true"
                    accept="image/*"
                    :show-file-list="false"
                   :action="upload"
                    :on-success="handleAvatarPCNormalSuccess"
                    list-type="picture-card"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-plus avatar-uploader-icon fs16"></i>
                    </el-upload>
                </el-form-item>

              </el-col>
              <small class="block tc light-grey">用于经纪商下拉选择框及经纪商账户相关页面</small>
            </el-row>
             <el-row :gutter="20" style="border-bottom:1px dashed #ddd;padding:10px 0;">
              <el-col :span="12">
               <el-form-item label="APP经纪商背景卡片" prop="agent_bg_card" label-width="100px">
                    <img width="100%" :src="angentForm.agent_bg_card" alt=""  class="avatar">
                   <el-upload
                    class="avatar-uploader"
                    :action="upload"
                    :with-credentials="true"
                    accept="image/*"
                    list-type="picture-card"
                    :show-file-list="false"
                    :on-success="handleAvatarAPPABCSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-plus avatar-uploader-icon fs16"></i>
                    </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="PC经纪商背景卡片" prop="agent_bg_card_pc" label-width="100px">
                    <img width="100%" :src="angentForm.agent_bg_card_pc" alt=""  class="avatar">
                   <el-upload
                    class="avatar-uploader"
                     :with-credentials="true"
                    accept="image/*"
                    :show-file-list="false"
                   :action="upload"
                    :on-success="handleAvatarPCCardSuccess"
                    list-type="picture-card"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-plus avatar-uploader-icon fs16"></i>
                    </el-upload>
                </el-form-item>

              </el-col>
               <small class="block tc light-grey">用于经纪商账户列表</small>
            </el-row>
                <el-form-item label="经纪商背景颜色值"  label-width="150px" class="mt20" prop="agent_bg_color">
                  <el-input placeholder="请在右边选择颜色" v-model="angentForm.agent_bg_color" readonly>
                 <template slot="append">
                   <el-color-picker v-model="color4" size="small"  @change="changeColor"></el-color-picker>
                 </template>
                </el-input>
                </el-form-item>
             
                <el-form-item label="" style="width:400px;">
                    <el-button type="primary" @click="onSubmitAgent('angentForm')">确定</el-button>
                    <el-button type="primary" @click="cancelDialog('angentForm')">取消</el-button>
                </el-form-item>
            </el-form>

          


        </div>
  
</template>

<style scoped>
.avatar-uploader {
  float: left;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
  float: left;
  margin-right: 10px;
}
</style>

<script>
import service from "@/service/index_c";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      dialogVisible: false,
      upload: service.haibeiServerUpload(),
      color4: "#f00",
      angentForm: {
        id: "",
        agent_num: "", //经纪商编号
        agent_name: "", //经纪商名字
        agent_reg_site: "", //经纪商注册地址
        agent_login_url: "", //经纪商登录地址
        trade_url: "", //交易连接地址
        agent_logo: "1", //App端经纪商通用logo
        agent_logo_pc: "1", //PC端经纪商通用logo
        agent_desc: "", //经纪商简介
        status: "1", //使用状态	必填，1：启用0：禁用-1：删除
        agent_bg_logo: "1", //App端经纪商背景LOGO
        agent_bg_card: "1", //App端经纪商背景LOGO
        agent_bg_logo_pc: "1", //pc端经纪商背景LOGO
        agent_bg_card_pc: "1", //pc端经纪商卡片LOGO
        agent_bg_color: "#f00"
      },
      rules: {
        agent_num: [
          { required: true, message: "请输入经纪商代码", trigger: "blur" }
        ],
        agent_name: [
          { required: true, message: "请输入经纪商名称", trigger: "blur" }
        ],
        agent_desc: [
          { required: true, message: "请输入经纪商简介", trigger: "blur" }
        ],
        agent_reg_site: [
          { required: true, message: "请输入注册经纪商地址", trigger: "blur" }
        ],
        agent_login_url: [
          { required: true, message: "请输入经纪商登录地址", trigger: "blur" }
        ],
        trade_url: [
          { required: true, message: "请输入交易连接地址", trigger: "blur" }
        ],
        agent_logo: [
          { required: true, message: "请上传APP通用LOGO", trigger: "blur" }
        ],
        agent_bg_card: [
          { required: true, message: "请上传APP背景卡片", trigger: "blur" }
        ],
        agent_bg_logo: [
          { required: true, message: "请上传APP背景LOGO", trigger: "blur" }
        ],
        agent_logo_pc: [
          { required: true, message: "PC端经纪商通用logo", trigger: "blur" }
        ],
        agent_bg_logo_pc: [
          { required: true, message: "PC端经纪商背景logo", trigger: "blur" }
        ],
        agent_bg_card_pc: [
          { required: true, message: "PC端经纪商卡片logo", trigger: "blur" }
        ],
        agent_bg_color: [
          {
            required: true,
            message: "请输入背景颜色",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.eidtAgentData();
  },
  watch: {
    $route: "eidtAgentData"
  },
  methods: {
    changeColor(color) {
      this.angentForm.agent_bg_color = color;
    },
    //经纪商背景logo
    handleAvatarAPPABLSuccess(res, file) {
      this.angentForm.agent_bg_logo = res.url;
    },
    //经纪商通用logo
    handleAvatarAPPAULSuccess(res, file) {
      this.angentForm.agent_logo = res.url;
    },
    //经纪商背景卡片
    handleAvatarAPPABCSuccess(res, file) {
      this.angentForm.agent_bg_card = res.url;
    },
    //上传pc背景
    handleAvatarPCBackSuccess(res, file) {
      this.angentForm.agent_bg_logo_pc = res.url;
    },
    //上传pc通用
    handleAvatarPCNormalSuccess(res, file) {
      this.angentForm.agent_logo_pc = res.url;
    },
    //上传pc卡片
    handleAvatarPCCardSuccess(res, file) {
      this.angentForm.agent_bg_card_pc = res.url;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type;
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG.indexOf("image") < 0) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    cancelDialog(formName) {
      this.$refs[formName].resetFields();
      this.$router.push({ name: "menu_angent_home" });
    },

    // 编辑数据
    async eidtAgentData() {
      let queryID = this.$route.query;
      if ("id" in queryID && queryID.id !== "" && queryID.id !== undefined) {
        let resultData = await service.haibeiServerQueryAngentById({
          id: this.$route.query.id
        });
        if (resultData.success) {
          if ("result" in resultData) {
            let res = resultData.result;
            this.angentForm = Object.assign({}, this.angentForm, res);
            this.color4 = res.agent_bg_color;
          } else {
            this.angentForm.id = "";
          }
        }
      } else {
        this.angentForm.id = "";
        console.log("ss");
      }
    },

    onSubmitAgent(formName) {
      this.$refs[formName].validate(valide => {
        if (valide) {
          let params = Object.assign({}, this.angentForm);

          this.addAndEditAgent(params);
        }
      });
    },
    async addAndEditAgent(params) {
      let resultData = null;
      if ("id" in params && params.id !== "" && params.id !== undefined) {
        resultData = await service.haibeiServerEditAngentItem(params);
      } else {
        delete params["id"];
        console.log(params);
        resultData = await service.haibeiServerAddAngentItem(params);
      }
      if (resultData.success) {
        this.$message({
          type: "success",
          message: "操作成功"
        });
        setTimeout(() => {
          this.$router.push({ name: "menu_angent_home" });
        }, 1000);
      } else {
        this.$message({
          type: "success",
          message: "操作失败"
        });
      }
    }
  }
};
</script>
